<!--
* @description 全部巡检-不合格点位
* @author zywu
* @date 2021/03/12 16:32:33
!-->
<template>
  <div class="unqualifed-point">
    <div class="unqualifed-point-top">
      <img src="../../assets/img/inspect/unqualifed_point.png" alt />
      <div>
        <span>{{pointUnPassCount||0}}个</span>
        <span>不合格点位发现数 | 按重复计算</span>
      </div>
    </div>
    <!-- 选择年月 -->
    <div class="choose-time">
      <van-cell title="日期" :value="date" @click="chooseTime = true"></van-cell>
      <i class="iconfont icon-jiantou"></i>
    </div>
    <!-- 筛选列表 -->
    <div class="inspect-statistic__filter d-flex ai-center jc-between">
      <pop-action
        ref="popLabel"
        text="标签"
        :options="labelList"
        align="start"
        @change="v=>{onPickerChange('labelId',v)}"
        style="width:80px;"
      ></pop-action>
      <unit-picker v-if="userInfo.isMuilUnitUser" text="单位" @change="onUnitChange" style="width:80px;"></unit-picker>
      <pop-button
        :is-active="!!selectedUser"
        :is-open="showUserSelect"
        :text="selectedUser?selectedUser.name:'责任人'"
        align="end"
        @click.native="onOpenUserSelect"
        style="width:80px;"
      ></pop-button>
    </div>
    <!-- 列表 -->
    <van-list
      ref="myList"
      v-model="loading"
      :finished="finished"
      :finished-text="pointList.length>0?'暂无更多':''"
      @load="getExaminePointListByPage(false)"
    >
      <van-cell v-for="(item) in pointList" :key="item.id" class="unqualifed-point-detail">
        <div class="unqualifed-point-name">点位：{{item.name}}</div>
        <div class="unqualified-red" v-if="item.unPassCount>0">
          <div>
            <span>不合格</span>
            <span>{{item.unPassCount}}</span>
            <span>次</span>
          </div>
          <span @click="goDetail(item)">查看原因</span>
        </div>
        <!-- <template v-if="true">
          <span class="about-unqualified">相关隐患4条</span>
          <div class="hidden-danger">
            <span class="unqualifed-point__tag is-finished">1条已完成整改</span>
            <span class="unqualifed-point__tag">1条待指派</span>
            <span class="unqualifed-point__tag">1条待整改</span>
            <span class="unqualifed-point__tag">1条待核实</span>
          </div>
        </template>-->
        <div class="unqualifed-point-now">
          <span>最新巡检显示该点位</span>
          <span v-if="item.lastResult==2" class="text-notok" @click="goLastTask(item)">
            仍然不合格
            <i class="iconfont icon-jiantou"></i>
          </span>
          <span v-else-if="item.lastResult==1" class="text-ok" @click="goLastTask(item)">
            已合格
            <i class="iconfont icon-jiantou"></i>
          </span>
        </div>
      </van-cell>
    </van-list>
    <div v-if="pointList.length==0" class="no-data-img">
      <img src="../../assets/img/common/defaultnone.png" />
    </div>
    <p></p>
    <!-- 年月时间插件 -->
    <van-popup v-model="chooseTime" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDateChange"
        @cancel="cancels"
      />
    </van-popup>

    <van-popup v-model="showUserSelect" round position="bottom" :style="{ height:'80%' }">
      <pop-user-select ref="popUserSelect" :defaultSelected="selectedUser" @change="onUserChange"></pop-user-select>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import UnitPicker from '@/components/UnitPicker'
import PopPicker from '@/components/PopPicker'
import PopAction from '@/components/PopAction'
import PopUserSelect from '../../components/PopUserSelect.vue'
import PopButton from '../../components/PopButton.vue'
import { getPointResultStats, getExaminePointListByPage } from '@/api/inspect'

export default {
  props: {
    labelList: {
      type: Array,
      default: function () {
        return []
      },
    },
    useProps: {
      type: Boolean,
      default: false,
    },
    defaultLabelId: {
      type: [String, Number],
      default: '',
    },
    month: {
      type: String,
      default: '',
    },
    defaultUser: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      date: '',
      chooseTime: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2200, 12, 1),
      currentDate: new Date(),
      currentDateConfirm: new Date(),
      showUserSelect: false,
      selectedUser: '',
      pointUnPassCount: 0,
      pageIndex: 0,
      loading: false,
      finished: false,
      pointList: [],
      isCreated: false,
    }
  },

  components: {
    UnitPicker,
    PopPicker,
    PopAction,
    PopUserSelect,
    PopButton,
  },

  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['userFullOrgIds']),
  },

  watch: {
    chooseTime() {
      this.currentDate = this.currentDateConfirm
    },
  },

  created() {},

  activated() {
    if (this.useProps) {
      this.currentDate = new Date(this.month + '-01')
      this.currentDateConfirm = new Date(this.month + '-01')
      this.labelId = `${this.defaultLabelId}`
      this.selectedUser = this.defaultUser.accountName
        ? Object.assign({}, this.defaultUser)
        : ''
      this.account = this.selectedUser.accountName || ''
      this.$nextTick(() => {
        this.$refs.popLabel.setSelected(this.labelId)
        if (this.$refs.popUserSelect) {
          this.$refs.popUserSelect.setSelected(this.selectedUser)
        }
      })
      this.date = this.$moment(this.currentDate).format('yyyy年MM月')
      this.setTime(this.currentDate)
      this.getPointResultStats()
      if (this.isCreated) {
        this.getExaminePointListByPage()
      }
    } else {
      this.date = this.$moment(this.currentDate).format('yyyy年MM月')
      this.setTime(this.currentDate)
      if (!this.isCreated) {
        this.getPointResultStats()
      }
    }
    //要重置props默认参数
    this.$emit('onInit')
    this.isCreated = true
  },

  methods: {
    goLastTask(item) {
      this.$router.push({
        name: 'InspectPoint',
        query: {
          taskId:
            item.lastTaskId ||
            item.examinedTaskIds[item.examinedTaskIds.length - 1],
          pointId: item.id,
          compile: '',
        },
        params: {},
      })
    },
    goDetail(params) {
      this.$router.push({
        name: 'InspectPoint',
        params,
      })
    },
    getExaminePointListByPage(isRefresh = true) {
      if (isRefresh) {
        this.pageIndex = 0
        this.pointList = []
        this.finished = false
      }
      this.loading = true
      getExaminePointListByPage({
        account: this.account ? this.account : '',
        orgIds: this.orgIds ? this.orgIds : this.userFullOrgIds,
        labelId: this.labelId,
        result: 2,
        beginTime:
          this.$moment(this.currentDateConfirm).format('yyyy-MM') + '-01 00:00',
        endTime:
          this.$moment(this.currentDateConfirm)
            .endOf('month')
            .format('YYYY-MM-DD') + ' 23:59',
        timeType: 2,
        pageIndex: this.pageIndex,
        pageSize: 10,
      })
        .then((res) => {
          this.pointList = this.pointList.concat(res.data)
          // 加载状态结束
          this.loading = false
          // 数据全部加载完成
          this.finished = this.pointList.length >= res.total
          if (!this.finished) {
            this.pageIndex++
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    getPointResultStats() {
      getPointResultStats({
        account: this.account ? this.account : '',
        orgIds: this.orgIds ? this.orgIds : this.userFullOrgIds,
        labelId: this.labelId || '',
        result: 2,
        beginTime:
          this.$moment(this.currentDateConfirm).format('yyyy-MM') + '-01 00:00',
        endTime:
          this.$moment(this.currentDateConfirm)
            .endOf('month')
            .format('YYYY-MM-DD') + ' 23:59',
        timeType: 2,
      }).then((res) => {
        this.pointUnPassCount = res.data.pointUnPassCount
      })
    },
    setTime(dateObj) {
      let dateStr = this.$moment(dateObj).format('yyyy-MM')
      this.startTime = `${dateStr}-01 00:00`
      this.endTime =
        this.$moment(
          this.$moment(
            new Date(dateObj.getFullYear(), dateObj.getMonth() + 1, 1)
          )
            .subtract(1, 'days')
            .toDate()
        ).format('yyyy-MM-DD') + ' 23:59'
    },
    onUserChange(item) {
      this.showUserSelect = false
      this.selectedUser = item
      this.account = item.accountName
      this.getExaminePointListByPage()
      this.getPointResultStats()
    },
    onOpenUserSelect() {
      this.showUserSelect = true
    },
    onDateChange(time) {
      this.date = this.$moment(time).format('yyyy年MM月')
      this.currentDateConfirm = time
      this.setTime(time)
      this.chooseTime = false
      this.getExaminePointListByPage()
      this.getPointResultStats()
    },
    onPickerChange(key, v) {
      this[key] = v.value
      this.getExaminePointListByPage()
      this.getPointResultStats()
    },
    onUnitChange(item) {
      this.orgIds = item.organizationId
      this.getExaminePointListByPage()
      this.getPointResultStats()
    },
    cancels() {
      this.chooseTime = false
    },
  },
}
</script>
<style lang='scss'>
.unqualifed-point {
  .unqualifed-point-top {
    position: relative;
    img {
      width: 100%;
    }
    div {
      position: absolute;
      top: 20%;
      height: 100%;
      left: 6%;
      color: #fff;
      display: inline-flex;
      flex-direction: column;
      // justify-content: space-around;
      span {
        display: inline-block;
      }
      span:nth-child(1) {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 4%;
      }
    }
  }
  .choose-time {
    box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
    border-radius: 5px;
    margin-top: 10px;
    overflow: hidden;
    display: inline-flex;
    width: 100%;
    align-items: center;
    .van-cell {
      padding: 10px 6px 10px 16px;
      .van-cell__value {
        span {
          color: #2471ca;
        }
      }
    }

    i {
      margin-right: 16px;
      color: #999999;
    }
  }
  .unqualifed-point-detail {
    margin-top: 12px;
    box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
    border-radius: 5px;
    padding: 20px 16px;
    .unqualifed-point-name {
      color: #333333;
      font-size: 18px;
      font-weight: bold;
    }
    .unqualified-red {
      background: rgba($color: #f02020, $alpha: 0.1);
      display: inline-flex;
      justify-content: space-between;
      width: calc(100% - 20px);
      padding: 10px;
      margin: 10px 0;
      div {
        span {
          color: #f02020;
          padding-bottom: 0px;
          border-bottom: none;
        }
        span:nth-child(2) {
          font-size: 18px;
          margin-left: 10px;
          font-weight: bold;
        }
      }
      span {
        color: #2471ca;
        border-bottom: 1px solid #2471ca;
        display: inline-block;
      }
    }
    .about-unqualified {
      color: #999999;
      display: inline-block;
    }
    .hidden-danger {
      display: inline-flex;
      flex-wrap: wrap;
      // justify-content: space-between;
    }
    .unqualifed-point-now {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      span {
        color: #999999;
      }
      span:nth-child(2) {
        margin-left: 10px;
      }
      .text-notok {
        color: #ff2c2c;
      }
      .text-ok {
        color: rgba(91, 209, 185, 1);
      }
    }
  }
  &__tag {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid rgba(36, 113, 202, 1);
    border-radius: 20px;
    width: 100px;
    text-align: center;
    margin-top: 10px;
    color: rgba(36, 113, 202, 1);
    margin-right: 10px;
    &.is-finished {
      border: 1px solid #47cfad;
      color: #47cfad;
    }
  }
}
</style>